<template>
    <el-card shadow="never" class="!border-none">
        <!-- Header Form Start -->
        <el-form :model="formData" label-width="90px" inline>
            <el-form-item label="订单编号">
                <el-input class="w-[280px]" v-model="formData.sn" placeholder="请输入订单编号" />
            </el-form-item>
            <el-form-item label="用户信息">
                <el-input
                    class="w-[280px]"
                    v-model="formData.keyword"
                    placeholder="请输入用户信息"
                />
            </el-form-item>
            <el-form-item label="课程名称">
                <el-input
                    class="w-[280px]"
                    v-model="formData.courseName"
                    placeholder="请输入课程名称"
                />
            </el-form-item>
            <el-form-item label="支付状态">
                <el-select v-model="formData.payStatus" class="w-[280px]" placeholder="请选择">
                    <el-option label="全部" value></el-option>
                    <el-option label="未支付" value="0"></el-option>
                    <el-option label="已支付" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="退款状态">
                <el-select v-model="formData.refundStatus" class="w-[280px]" placeholder="请选择">
                    <el-option label="全部" value></el-option>
                    <el-option label="全部退款" value="3"></el-option>
                    <el-option label="未退款" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="下单时间">
                <data-picker
                    v-model:start_time="formData.startTime"
                    v-model:end_time="formData.endTime"
                >
                </data-picker>
            </el-form-item>
            <!-- <el-form-item label="课程类型">
                <el-select v-model="formData.couser_type" class="w-[280px]" placeholder="请选择">
                    <el-option label="全部" value></el-option>
                    <el-option label="图文" value="0"></el-option>
                    <el-option label="视频" value="1"></el-option>
                    <el-option label="音频" value="2"></el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item>
                <div class="ml-[20px]">
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </div>
            </el-form-item>
        </el-form>
        <!-- Header Form End -->
    </el-card>

    <el-card shadow="never" class="mt-4 !border-none">
        <!-- Header Tabs Start -->
        <el-tabs v-model="formData.orderStatus" @tab-click="tabChange">
            <el-tab-pane
                class="radio-group"
                v-for="(item, name, index) in extend"
                :key="index"
                :label="orderMode[name] + '(' + item + ')'"
                :name="index"
            ></el-tab-pane>
        </el-tabs>
        <!-- Header Tabs End -->

        <!-- Main TableData Start -->
        <div class="mt-4">
            <el-table
                ref="tableData"
                :data="pager.lists"
                style="width: 100%"
                v-loading="pager.loading"
            >
                <el-table-column property="sn" label="订单编号" min-width="140" />
                <el-table-column property="nickname" label="用户信息" min-width="160">
                    <template #default="scope">
                        <el-popover placement="top-start" width="200px" trigger="hover">
                            <div class="flex">
                                <span class="flex-none m-r-20">头像：</span>
                                <el-image
                                    :src="scope.row.avatar"
                                    style="width: 40px; height: 40px; border-radius: 50%"
                                >
                                </el-image>
                            </div>
                            <div class="flex m-t-20 col-top">
                                <span class="flex-none m-r-20">昵称：</span>
                                <span>{{ scope.row.nickname }}</span>
                            </div>
                            <div class="flex m-t-20 col-top">
                                <span class="flex-none m-r-20">编号：</span>
                                <span>{{ scope.row.userSn }}</span>
                            </div>
                            <template #reference>
                                <router-link :to="`/consumer/detail?id=${scope.row.userId}`">
                                    <div class="pointer normal">
                                        {{ scope.row.nickname }}
                                    </div>
                                </router-link>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="课程信息" min-width="250">
                    <template #default="scope">
                        <div class="goods-box flex items-center">
                            <div class="w-[80px]">
                                <el-image
                                    style="height: 60px; min-width: 80px"
                                    :src="scope.row.courseCover"
                                    :preview-src-list="[scope.row.courseCover]"
                                    :hide-on-click-modal="true"
                                    :preview-teleported="true"
                                    :fit="'contain'"
                                ></el-image>
                            </div>
                            <div class="ml-[10px]">
                                <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    :content="scope.row.courseName"
                                    placement="top-start"
                                >
                                    <div class="goods-name text_hidden">
                                        {{ scope.row.courseName }}
                                    </div>
                                </el-tooltip>
                                <div class="muted">¥{{ scope.row.courseSellPrice }}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column property="order_amount" label="实付金额" width="120">
                    <template #default="scope"> ¥{{ scope.row.orderAmount }} </template>
                </el-table-column>
                <el-table-column property="payStatus" label="支付状态" width="125">
                    <template v-slot="{ row }">
                        <span>{{ row.payStatus == 0 ? '未支付' : '已支付' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="订单状态" width="125">
                    <template v-slot="{ row }">
                        <span :class="{ error: row.orderStatus === 1 }">{{
                            row.orderStatus == 1
                                ? '待付款'
                                : row.orderStatus == 2
                                ? '已完成'
                                : '已关闭'
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="退款状态" width="125">
                    <template v-slot="{ row }">
                        <span :class="{ error: row.refundStatus === 3 }">{{
                            row.refundStatus == 1
                                ? '未退款'
                                : row.refundStatus == 2
                                ? '部分退款'
                                : '全部退款'
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column property="address" label="操作" min-width="150" fixed="right">
                    <template #default="scope">
                        <div class="flex">
                            <router-link
                                class="mr-[10px]"
                                :to="{
                                    path: 'detail',
                                    query: {
                                        id: scope.row.id
                                    }
                                }"
                            >
                                <el-button type="primary" link v-perms="['order:detail']"
                                    >详情</el-button
                                >
                            </router-link>
                            <!-- 操作 -->
                            <operation
                                btnStyle="text"
                                :id="scope.row.id"
                                :cancel_btn="scope.row.orderStatus == 2"
                                :del_btn="scope.row.del_btn"
                                :shop_remark="scope.row.shopRemark"
                                @refresh="resetPage"
                            />
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- Main TableData End -->

        <!-- Footer Pagination Start -->
        <div class="flex justify-end mr-2">
            <pagination v-model="pager" @change="getLists" />
        </div>
        <!-- Footer Pagination End -->
    </el-card>
    <layout-footer></layout-footer>
</template>

<script lang="ts" setup>
import { apiOrderLists, apiOrdercount } from '@/api/order/order'
import { reactive } from 'vue'
import { OrderMode } from '@/utils/enum'
import Operation from './components/operation.vue'
import Pagination from '@/components/pagination/index.vue'
import DataPicker from '@/components/data-picker/index.vue'
import { usePaging } from '@/hooks/usePaging'
import LayoutFooter from '@/layout/components/footer.vue'

/** Data Start **/
const orderMode: any = reactive<any>(OrderMode)
const formData = reactive({
    sn: '',
    keyword: '',
    payStatus: '',
    refundStatus: '',
    startTime: '',
    endTime: '',
    orderStatus: 0,
    couser_type: '',
    courseName: ''
})
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiOrderLists,
    params: formData
})
const extend = reactive<any>({
    all_num: '',
    waitpay_num: '',
    complete_num: '',
    close_num: ''
})
/** Data End **/

/** Methods Start **/
/**
 * @description 获取订单其它列表
 */
const getOtherLists = async (): Promise<void> => {
    const res = await apiOrdercount()
    Object.keys(extend).map((item) => {
        extend[item] = res[item]
    })
}
/** Methods End **/

/** Methods Start **/
/**
 * @description tab栏改变
 */
const tabChange = () => {
    console.log(formData)
    setTimeout(() => {
        getLists()
    }, 0)
}
/** Methods End **/

/** LifeCycle Start **/
getLists()
getOtherLists()
/** LifeCycle End **/
</script>

<style lang="scss">
.ls-input {
    width: 240px;
}

.error {
    color: #db2828;
}

.goods-box {
    .goods-name {
        color: #333333;
    }
}
</style>
